<template>
  <div>
    <main id="jury-panel" class="page" v-if="$route.name !== 'JudgingInfo'">
      <PageBanner :bg_url="page.banner" />
      <div class="page-category">
        <router-link
          class="term-item"
          v-for="(val,k) of page.category"
          :to="{ name: val.route, params: val.param }"
          :key="k"
        >{{val.term}}</router-link>
      </div>
      <section class="section-container">
        <div class="section-wrap">
          <ul class="jury-list">
            <li v-for="item of jury" :key="item.index" class="jury-item">
              <Profile :item="item" />
            </li>
          </ul>
        </div>
      </section>
    </main>
    <router-view v-else />
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import Profile from "@/components/Profile";
export default {
  name: "Jury",
  components: {
    Profile
  },
  data() {
    return {
      page: {
        banner: {
          "background-image": `url(${require("@/assets/img/jury-panel.jpg")})`
        },
        category: [
          {
            route: "JuryPanel",
            param: { year: 2019 },
            term: "jury 2019"
          },
          {
            route: "JuryPanel",
            param: { year: 2017 },
            term: "jury 2017"
          },
          {
            route: "JuryPanel",
            param: { year: 2015 },
            term: "jury 2013"
          },
          {
            route: "JuryPanel",
            param: { year: 2013 },
            term: "jury 2015"
          }
        ]
      },
      query: {
        limit: 12,
        pager: 1,
        link: []
      },
      list: [],
      isEmpty: false
    };
  },
  computed: {
    ...mapGetters(["jury"])
  },
  created() {
    console.log(this.$route.name);
  }
};
</script>
<style lang="scss">
.jury-list {
  text-align: center;
  li {
    display: inline-block;
    vertical-align: top;
    width: 25%;
    .jury-name {
      color: #202020;
    }
    &:nth-of-type(n + 5) {
      margin-top: 80px;
    }
  }
}
</style>